import React, { Component } from 'react';

import store from '../Store.js';
import * as Actions from '../Actions.js';

class ReducTodo extends Component {
  constructor(props) {
    super(props);
    this.getOwnState = this.getOwnState.bind(this);

    this.state = this.getOwnState()
  }
  getOwnState() {
    return {
      todos: store.getState()
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    // return (nextProps.caption !== this.props.caption) ||
    //   (nextState.value !== this.state.value);
    console.log(nextProps, nextState)
    return true
  }
  render() {
    const { todos = [] } = this.state;
    return (
      <div>
        <ul>
          {
            todos.map((todo, order) => (
              <li
                key={`todo-${order}`}
                style={{ textDecoration: todo.status ? 'line-through' : 'none' }}
                onClick={() => store.dispatch(Actions.complete(order))}
              >{todo.value}</li>
            ))
          }
        </ul>
      </div>
    );
  }
}

export default ReducTodo;

